<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,  initial-scale=1.0">
<title>用户管理</title>
<script type="text/javascript"  src="${pageContext.request.contextPath }/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript"  src="${pageContext.request.contextPath }/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath }/resource/css/bootstrap.css">
</head>
<body>
	
	  <div class="container">
     
                <form action="${pageContext.request.contextPath }/admin/users" method="post">
                      用户名: <input type="text" name="username"  value="${user.username }">
                      用户状态：
                      <input type="radio" name="locked" value="0"  ${user.locked==0?"checked":"" }>正常
                      <input type="radio" name="locked" value="1"  ${user.locked==1?"checked":"" }>锁定
                      <input type="radio" name="locked" value="2"  ${user.locked==null||user.locked==2?"checked":"" }>全部
                      <input type="button" onclick="query()"  value="查询">               
                </form>
                
                <table class="table">
                      <tr>
                           <td>序号</td>
                           <td>用户名</td>
                           <td>性别</td>
                           <td>出生日期</td>
                           <td>注册日期</td>
                           <td>是否锁定</td>
                      </tr>
                      
                      <c:forEach items="${info.list}" var="u"  varStatus="i">
                           <tr>
                                 <td>${i.count }</td>
                                 <td>${u.username }</td>
                                 <td>${u.gender==0?"女":"男"  }</td>
                                 <td><fmt:formatDate  value="${u.birthday }" pattern="yyyy-MM-dd"/></td>
                                 <td><fmt:formatDate  value="${u.created }" pattern="yyyy-MM-dd"/></td>
                                 <td>
                                      <c:if test="${u.locked==0  }">
                                            <input type="button"  class="btn btn-success" onclick="updateLocked('${u.id}',this)"  value="正常">
                                      </c:if>
                                      <c:if test="${u.locked==1  }">
                                            <input type="button"  class="btn btn-danger" onclick="updateLocked('${u.id}',this)"  value="锁定">
                                      </c:if>
                                 </td>
                           </tr>
                      </c:forEach>
                </table>
           
           <!-- 加载分页页面 -->
           <jsp:include  page="/WEB-INF/view/common/pages.jsp"></jsp:include>
     </div>
</body>
<script type="text/javascript">

//分页
function goPage(pageNum){
      //location="/admin/users?pageNum="+pageNum+ "&" +  $("form").serialize();
      
      $("#center").load("${pageContext.request.contextPath }/admin/users?pageNum="+pageNum +  "&" + $("form").serialize());
}

//查询用户数据
function query(){
      $("#center").load("${pageContext.request.contextPath }/admin/users?"+  $("form").serialize());
}

//修改锁定状态
function updateLocked(id,obj){
      //获取按钮显示的文字，根据文字，获取要修改的锁定状态
      var locked = $(obj).val()=="锁定"?0:1;
      
      //使用ajax修改
      $.post(
           "${pageContext.request.contextPath }/admin/updateLocked",
           {id:id,locked:locked},
           function(result){
                 
                 if(result){
                      //修改按钮的文字和样式
                      if($(obj).val()=="锁定"){
                            //将文字修改
                            $(obj).val("正常");
                            
                            //修改按钮样式
                            $(obj).removeClass("btn-danger");
                            $(obj).addClass("btn-success");
                      }else{
                            
                            //如果原来不是热门
                            $(obj).val("锁定");
                            
                            //修改按钮样式
                            $(obj).removeClass("btn-success");
                            $(obj).addClass("btn-danger");
                      }
                      
                 }else{
                      alert("修改失败");
                 }
           }
      )
}
</script>

</html>